<template>
	<!-- <view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view> -->
	<view class="content">
		<uni-search-bar placeholder="请输入内容" bgColor="#EEEEEE" @confirm="search" :focus="true" v-model="searchValue"
			@blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear">
		</uni-search-bar>

		<view style="padding: 20px;">
			<u-button type="primary" text="确定" @click="goSearch"></u-button>
		</view>
		
		<view style="padding: 20px;">
			<div>vant按钮</div>
			<van-button type="primary" @click='goPicture'>默认按钮</van-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				searchValue: ''
			}
		},
		onLoad() {

		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			// 跳转到查询界面
			goSearch(){
				console.log('跳转')
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			// 图表
			goPicture(){
				console.log('图表')
				uni.navigateTo({
					url:'/pages/echarts/echarts'
				})
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
